import React from 'react'
import uuid from 'uuid'
import * as FormUtil from '../../../public/js/formUtil'
import * as AlertUtil from '../../../public/js/alertUtil'
import * as StringUtils from '../../../public/js/stringUtils'
import Form from '../../../share/Form'

export default class RouterEdit extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            formId: uuid.v4()
        }
    }

    componentDidMount() {
        const id = this.props.match.params['id'], menuId = this.props.match.params['menuId']
        if(StringUtils.isNotEmpty(id)) {
            const url = domainName + '/routers/' + id, data = {}
            FormUtil.getData(url,data,(response)=>{
                FormUtil.loadJsonDataToForm($('#'+ this.state.formId), response)
            })
        } else {
            let form = $('#' + this.state.formId)
            FormUtil.setFieldData("menuId", form, menuId)
        }
    }

    save() {
        let url = domainName + '/routers',data = $('#' + this.state.formId).serializeObject(), 
            id = this.props.match.params['id'],methodName = 'POST'
        if(StringUtils.isNotEmpty(id)) {
            methodName = 'PUT'
        }
        FormUtil.submit(url, data, (response)=>{
            AlertUtil.alert('提示',"保存成功!",()=>{
                this.props.history.goBack()
            })
        },(error) => {
            AlertUtil.alert('提示',"保存失败,请联系管理员!")
        }, methodName)
    }

    cancel() {
        this.props.history.goBack()
    }

    render() {
        return (
            <Form formId = {this.state.formId} saveHandle={this.save.bind(this)} cancelHandle = {this.cancel.bind(this)}>
                <div className="form-group row">
                    <input type="hidden" name="id"/>
                    <input type="hidden" name="menuId"/>
                    <label className="col-sm-2 text-right control-label col-form-label">组件代码</label>
                    <div className="col-sm-10">
                        <input type="text" name="component" className="form-control" required placeholder="组件代码" maxLength="50"/>
                    </div>
                </div>

                <div className="form-group row">
                    <label className="col-sm-2 text-right control-label col-form-label">组件名称</label>
                    <div className="col-sm-10">
                        <input type="text" name="componentName" className="form-control" placeholder="组件名称" maxLength="50"/>
                    </div>
                </div>

                <div className="form-group row">
                    <label className="col-sm-2 text-right control-label col-form-label">路由路径</label>
                    <div className="col-sm-10">
                        <input type="text" name="path" className="form-control" required placeholder="路由路径" maxLength="50"/>
                    </div>
                </div>

                <div className="form-group row">
                    <label className="col-sm-2 text-right control-label col-form-label">是否默认</label>
                    <div className="col-sm-10">
                        <select className="form-control" name="defaultPath">
                            <option value="false">否</option>
                            <option value="true">是</option>
                        </select>
                    </div>
                </div>
            </Form>
        )
    }
}